<template>
  <div>
    <h1 class="title">{{$t('Login')}}</h1>
    <h3 class="sub-title">{{$t('Login-desc')}}</h3>
    <div class="form-container">
      <el-form :model="form" label-width="70px" size="large" ref="formRef">
        <el-form-item :label="`${$t('username')}:`" required prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item :label="`${$t('password')}:`" required prop="password">
          <el-input v-model="form.password" type="password" show-password />
        </el-form-item>
      </el-form>
      <el-form-item>
        <el-button
          type="primary"
          round
          size="large"
          @click="handleLogin(formRef)"
          style="width: calc(100% - 70px); margin-left: 70px"
          >{{$t('login')}}</el-button
        >
      </el-form-item>
      <div class="bottom-container" style="margin-left: 70px">
        <span>没有账号?&nbsp;</span>
        <el-button type="text" @click="$emit('changeState', false)"
          >去注册</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import useUserStore from "@s/user.js";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const formRef = ref(null);
const user = useUserStore();
const form = reactive({
  username: "",
  password: "",
});
const router = useRouter();
const handleLogin = async (ref) => {
  if (!ref) return;
  await ref.validate(async (valid, fields) => {
    if (valid) {
      const data = await user.handleLogin(form);
      router.replace("/dashboard");
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style scoped lang="scss">
.login-right {
  color: #5794ff;

  .title {
    margin-top: 20px;
    margin-bottom: 0px;
  }
  .sub-title {
    margin-top: 10px;
    color: #999999;
    font-weight: 400;
  }
  .form-container {
    flex: 1;
    width: 80%;
    padding: 30px 0;
  }
  .bottom-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--el-font-size-base);
    color: #999999;
  }
}
</style>